<template>
    <h3>Class绑定</h3>
    <div class="box1 box2 box3">原始的class属性写法</div>
    <!-- 非指令绑定方式，不要写对象结构 -->
    <!-- <div class="{box1: true, box2: false}">绑定class属性为一个对象</div> -->
    <div :class="{box1: true, box2: false, 'box3': true}">
        绑定class属性为一个对象
    </div>
    <div :class="{box1: true, box2: isActive, 'box3': true}">
        绑定class属性为一个对象
    </div>
    <div :class="classObj">
        绑定class属性为一个响应式对象
    </div>
    <div :class="classArr">
        绑定class属性为一个响应式数组
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isActive = ref(false)
const classObj = reactive({
    box1: true, 
    box2: false, 
    'box3': true
})

const classArr = reactive(['box1', 'box2', 'box3'])
</script>
<style scoped>
.box2 {
    color: red;
}
</style>